<template>
  <div>
    <h2 style="text-align: left; margin-left: 3%">为您推荐</h2>
    <div v-if="isLoad">
      <van-skeleton title :row="5" />
    </div>
    <div v-else>
      <div class="lists" >
        <div v-for="(item, index) in RecommendList" :key="index" class="miniStreamViews" @click="goToInfo(item.goods_id)">
          <van-image
            class="img"
            fit="contain"
            v-lazy
            :src="url + item.original_img"
          />
          <div class="text-warps" :title="item.goods_name">
            {{ item.goods_name }}
          </div>
          <div class="prices">${{ item.market_price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isLoad: true,
      RecommendList: [],
      url: "https://img.9lele.com",
    };
  },
  mounted() {
    setTimeout(
      function () {
        this.isLoad = false;
      }.bind(this),
      500
    );
  },
  computed: {
    ...mapGetters(["recommend"]),
  },
  methods: {
    getRecommend() {
      this.$store.dispatch("apple/Recommend").then((e) => {
        // console.log(e);
        this.RecommendList = e.data.data;
        console.log(30, this.RecommendList);
      });
    },
    goToInfo(id){
        this.$router.push({path:'/info',query:{id:id}})
    }
  },
  created() {
    this.getRecommend();
  },
};
</script>

<style scoped="scoped">
.lists {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.miniStreamViews {
  width: 44%;
  height: 15rem;
  /* height: 20vh; */
  background-color: #fff;
  border-radius: 10px;
  margin: 0 3%;
  margin-top: 2%;
}
::-webkit-scrollbar {
  width: 0px;
}
.text-warps {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  margin-left: 3%;
  font-size: 1.1rem;
}
.img {
  width: 100%;
  height: 80%;
}
.prices {
  text-align: left;
  margin-left: 3%;
  color: rgba(255, 38, 0, 0.575);
}
</style>